<template>
  <div id="search">  
  
  <el-form ref="form"  label-width="0px">  
    <el-row>
        <el-col :span="15" style="display:flex;">    
               <el-form-item   >
                <el-select  v-model="form.select_num" placeholder="筛选团队"  style="width:140px;">
                    <el-option  v-for="(item,index) in select_data" :key="index" :label="item.telphone" :value="item.uid"></el-option>
                </el-select>
            </el-form-item>  
             <el-form-item label-width="0px" label="" style="margin-left:5px;">
                <el-input v-model="form.telphone" placeholder="手机号" style="width:130px;"></el-input>
            </el-form-item> 

             <div class="custom_button2"  style="margin-left:5px;" @click="search_but"></div>
        </el-col> 
          <el-col :span="9" style="text-align: right;">
             <el-button type="primary" v-if="export_type" class="custom_color_button" style="margin-left:10px;"  @click="output">是否导出</el-button> 
             <el-button type="primary" v-if="export_type1" class="custom_color_button" style="margin-left:10px;"  @click="output1">导出-{{ export_title }}</el-button>  
              <el-button class="custom_color_button" type="primary" @click="refresh_but()">刷新</el-button>
        </el-col>  
  </el-row>

  </el-form >

   <!-- 渲染数据list -->
   <search-list :datalist="datalist" @up_list_fun="list_fun"> </search-list>

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>


    <!-- 导出表格数据表格 -->
        <el-table v-show="false" :data="export_datalist" id="mytable1" style="width: 100%;height:10px;">
                 <el-table-column label="帐号"  align='center' width="180">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="姓名"  align='center' width="180">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="权限"  align='center' width="180">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.manor }}
                        </span>
                    </template>
                </el-table-column>
                 <el-table-column label="团队"  align='center' width="220">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.team_name }} - {{ scope.row.team_telphone }}</span>
                    </template>
                </el-table-column>
                   <el-table-column label="产出收益"  align='center' >                   
                    <template slot-scope="scope">    
                        {{ scope.row.total_profit }}                  
                    </template>
                </el-table-column>
                <el-table-column label="金蛋"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.jindan }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="彩蛋"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.caidan }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="持有价值"  align='center' >                   
                    <template slot-scope="scope">    
                        {{ scope.row.hold_price }}     
                    </template>
                </el-table-column>
                 <el-table-column label="产出价值"  align='center' width="100px">                   
                    <template slot-scope="scope">    
                        {{scope.row.hold_wait_price   }}            
                    </template>
                </el-table-column>
                <el-table-column label="消耗蜜贝"  align='center' width="100px">                   
                    <template slot-scope="scope">    
                      {{scope.row.usekmb   }}             
                    </template>
                </el-table-column>
                <el-table-column label="收益差额"  align='center' width="100px">                   
                    <template slot-scope="scope">    
                        <span>{{ js_fun_num(scope.row.jindan,scope.row.caidan,scope.row.total_profit,scope.row.hold_price,scope.row.hold_wait_price,) }}</span>   
                    </template>
                </el-table-column>
                 
                 <el-table-column :label="variable_name4"  align='center' width="300px">                   
                    <template slot-scope="scope">                   
                        <span >当前持有:</span><span>{{ scope.row.hold_count }}</span> 
                        <span >待收货:</span><span>{{ scope.row.hold_wait_count }}</span>
                        <span >已收货:</span> <span>{{ scope.row.hold_produced_count }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name1"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.kmb }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name2"  align='center'>                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.gdb }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="是否回本"  align='center' >                   
                    <template slot-scope="scope">                 
                        <!-- <span>{{ js_fun(scope.row.total_profit,scope.row.use_price_number) }}</span> -->
                         <span>{{ js_fun(scope.row.jindan,scope.row.caidan,scope.row.total_profit,scope.row.hold_price,scope.row.hold_wait_price,) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否活跃玩家"   align='center' width="130px">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.activity_status == 0">不活跃</span>
                        <span v-if="scope.row.activity_status == 1">活跃</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态"  align='center' width="150">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.total_profit >= scope.row.use_price_number">已完成</span>
                        <span v-else>未完成</span>
                    </template>
                </el-table-column>
        </el-table> 
      
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import SearchList from '@/view/Search/SearchList'
export default {
  name: 'search',
  data () {
    return {
        datalist:[],
        page:1,
        count:0,              
        form:{
           telphone:'',
           select_num:'',
        },
        select_data:[{"id":0,"name":"全部"},{"id":1,"name":"实际"},{"id":2,"name":"虚拟"}],
        export_type:false,
        export_type1:false,
        export_datalist:[],
        export_title:'不可导出',
        loading:true,
    }
  },
 components:{
    SearchList
  },
  created(){
      this.list_fun()
      this.team_fun()
  }, 
  mounted (){
    
  },
  methods: {
    team_fun(){
     
      this.post("Statistics/listOfLeader", {

	        }).then(res => {

             this.select_data = res.result
           //console.log(res ,"6265465")
         })
    },
     list_fun(){
          this.post("/Statistics/memberlist", {
              page:this.page,
              telphone:this.form.telphone,
              team_uid:this.form.select_num,
              search_all:0, //0 分页 1 全部
	        }).then(res => {
            this.count = res.result.count
            this.datalist = res.result.list
          
            
           console.log(res ,"dddsss")
         })
      },
      js_fun(a,b,c,d,e){
            var name1 = Number(a)
            var name2 = Number(b)
            var name3 = Number(c)
            var name4 = Number(d)
            var name5 = Number(e)
            var num1 = name1 + name2 + name3
            var num2 = name4 + name5
            //console.log(num1,num2)
            if( num1 > num2){
                return '回本'
            }else{
                
                return '未回本'
            }
             
      },
      js_fun_num(a,b,c,d,e){
            var name1 = Number(a)
            var name2 = Number(b)
            var name3 = Number(c)
            var name4 = Number(d)
            var name5 = Number(e)
            var num1 = name1 + name2 + name3
            var num2 = name4 + name5
            console.log(num1,num2)
            if(num1 == num2){
                 return 0
            }else{

                if( num1 > num2){
                   var ca =  Number(num1)  - Number(num2)  
                   return  '+' + parseInt(ca) 
                }else{
                    var ca =  Number(num2)  - Number(num1) 
                    return  '-' + parseInt(ca) 
                }
                 
            }
            
      },
       export_fun(){
        this.export_datalist = []
        let contnum = Math.ceil(this.count/10);
         const loading = this.$loading({   //视频上传遮罩层
                lock: true,
                text: '加载中，请耐心等待',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
         });
        for (let i = 1; i <= contnum; i++) {

           this.post("/Statistics/memberlist", {
              page:i,
              telphone:this.form.telphone,
              team_uid:this.form.select_num,
              search_all:0, //0 分页 1 全部
	          }).then(res => {

              for(let item of res.result.list) {
                  this.export_datalist.push(item)
              }
              console.log(this.export_datalist) 
              
              console.log(i)
             
              if(this.export_datalist.length == this.count){
                 this.export_title = "可导出"
                 this.export_type = false
                 this.export_type1 = true
                 loading.close();  //关闭视频上传遮罩层
              }
              
           })
       
         
        }
      },
      output() {
         this.export_fun()     
      },
      output1(){
          if(this.form.telphone != ''  || this.form.select_num != ''){ //是否出现导出按钮
               
              var wb = XLSX.utils.table_to_book(document.querySelector("#mytable1"));//mytable为表格的id名
              var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
              });
              try {
                FileSaver.saveAs(
                  new Blob([wbout], { type: "application/octet-stream" }),
                  "sheet.xlsx"
                );
              } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
              }
              return wbout;   

        }else{
            this.export_datalist = []
             this.export_title = "不可导出"
            this.open1('需要搜索团队','success')  //提示框
           
        }
      },
      search_but(){
        if(this.form.telphone != ''  || this.form.select_num != ''){ //是否出现导出按钮
              
             this.export_type = true
             this.export_type1 = false
             this.export_datalist = []
             this.export_title = "不可导出"
            
        }else{
             this.export_type = false
             this.export_type1 = false
             this.export_datalist = []
             this.export_title = "不可导出"
        }
        this.page = 1
        this.list_fun()
      },
      refresh_but(){
        this.loading = true
        this.export_type=false
        this.export_type1=false
        this.export_datalist=[]

        this.page = 1
        this.form={
           telphone:'',
           select_num:'',
        }
        this.list_fun()
      },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>

</style>
